<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>南方电网PG标准机房动环监控信息化系统V1.0</title>
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <link rel="stylesheet" th:href="@{/static/layuiadmin/layui/css/layui.css}" media="all">
    <link rel="stylesheet" th:href="@{/static/layuiadmin/style/admin.css}" media="all">
    <script type="text/javascript" th:src="@{/static/js/jquery.min.js}"></script>
</head>
<body>
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 10px;margin-left: 80px">
    <legend>基本属性配置</legend>
</fieldset>
<div class="layui-form" style="margin-top: 0px;margin-bottom: 20px">
    <div class="layui-form-item">
        <div class="layui-inline">
            <label class="layui-form-label">变电站ID</label>
            <div class="layui-input-block">
                <input id="siteId" class="layui-input">
            </div>
        </div>
    </div>
    <div class="layui-form-item">
        <div class="layui-inline">
            <label class="layui-form-label">变电站名称</label>
            <div class="layui-input-block">
                <input id="siteName" class="layui-input">
            </div>
        </div>
    </div>
    <div class="layui-form-item">
        <div class="layui-input-block" style="margin-right: 60px">
            <button type="button" class="layui-btn layui-btn-normal" onclick="submit()">修改数据</button>
        </div>
    </div>
</div>

<fieldset class="layui-elem-field layui-field-title" style="margin-top: 40px;margin-left: 80px">
    <legend>模型属性配置</legend>
</fieldset>
<table border="1" width="400px" style="margin-left: 50px">
    <thead>
    <tr style="height: 50px">
        <th>数据模型</th>
        <th>对应物模型</th>
        <th>操作</th>
    </tr>
    </thead>
    <tbody id="table">
    </tbody>
</table>
<div class="layui-form" style="margin-top: 50px;margin-bottom: 20px">
    <div class="layui-form-item">
        <div class="layui-inline">
            <label class="layui-form-label">物模型</label>
            <div class="layui-input-block" style="width: 188px">
                <select id="model" name="model" lay-filter="model">
                    <option value="0">devId</option>
                    <option value="1">sigValue</option>
                    <option value="2">sigName</option>
                    <option value="3">type</option>
                </select>
            </div>
        </div>
    </div>
    <div class="layui-form-item">
        <div class="layui-inline">
            <label class="layui-form-label">数据属性</label>
            <div class="layui-input-block">
                <input id="dataVal" class="layui-input">
            </div>
        </div>
    </div>
    <div class="layui-form-item">
        <div class="layui-input-block" style="margin-right: 60px">
            <button type="button" class="layui-btn layui-btn-normal" onclick="addModel()">添加数据</button>
        </div>
    </div>
</div>
<script th:src="@{/static/layuiadmin/layui/layui.js}"></script>
<script>
    layui.use('form', function () {
        var form = layui.form;
        form.render();
    })
</script>
<script>

    $(function () {
        $.ajax({
            //请求方式
            type: "Get",
            //请求的媒体类型
            contentType: "application/json;charset=UTF-8",
            //请求地址
            url: "/model/getData",
            cache: false,
            //请求成功
            success: function (res) {
                if (res != null) {
                    $("#siteId").val(res.siteId);
                    $("#siteName").val(res.siteName);
                }
            }
        });
    })

    $(function () {
        $.ajax({
            //请求方式
            type: "Get",
            //请求的媒体类型
            contentType: "application/json;charset=UTF-8",
            //请求地址
            url: "/model/getModel",
            cache: false,
            //请求成功
            success: function (res) {
                res.forEach(function (data) {
                    $("#table").append("<tr style='text-align: center;height: 40px'><td>" + data.key + "</td> <td >" + data.value + "</td><td ><button onclick=del('"+data.key+"')>删除</button></td> </tr>")
                })
            }
        });
    })

    function submit() {
        var obj = {};
        obj.siteId = $("#siteId").val();
        obj.siteName = $("#siteName").val();
        $.ajax({
            //请求方式
            type: "POST",
            //请求的媒体类型
            contentType: "application/json;charset=UTF-8",
            //请求地址
            url: "/model/update",
            //数据，json字符串
            data: JSON.stringify(obj),
            //请求成功
            success: function (res) {
                alert(res);
            }
        });
    }

    function del(val) {
        console.log(val)
        $.ajax({
            //请求方式
            type: "POST",
            //请求的媒体类型
            contentType: "application/json;charset=UTF-8",
            //请求地址
            url: "/model/delete",
            //数据，json字符串
            data: val,
            //请求成功
            success: function (res) {
                if (res == "200"){
                    alert("删除数据模型 "+val+" 成功！");
                    location.reload();
                }
            }
        });
    }

    function addModel() {
        var obj = {};
        obj.model = $("#model").val();
        obj.dataVal = $("#dataVal").val();
        $.ajax({
            //请求方式
            type: "POST",
            //请求的媒体类型
            contentType: "application/json;charset=UTF-8",
            //请求地址
            url: "/model/addModel",
            //数据，json字符串
            data: JSON.stringify(obj),
            //请求成功
            success: function (res) {
                alert(res)
                location.reload();
            }
        });
    }
</script>
</body>
</html>